<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  搜索框搜索
  <input type="text" v-model="searchValue">
<!-- 获取数据 -->
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        searchValue: ''
      }
    },
    watch: {
      searchValue: {
        handler: 'getList',
        immediate: true
      }
    },
    methods: {
      getList(){
        const host='https://www.fastmock.site/mock/7cb97953fef52e7a52502edba1a2e419/api'
        axios.post(host+'/playerColumn/page').then(res=>{
          console.log(res)
        //  接口加参数searchValue，只要searchValue发生变化，就会执行 getList
        })
      }
    }
  })
</script>
</html>